<template>
    <Header :activeIndex="activeIndex" />
    <el-container style="margin: 0 50px">
      <el-main>
        <el-table
          :data="orders"
          style="min-width: 100%; height: 80vh; margin-top: 10px"
        >
          <el-table-column prop="id" label="订单编号" align="center"></el-table-column>
          <el-table-column prop="detail" width="100px" :show-overflow-tooltip="true" label="购买清单"></el-table-column>
          <el-table-column prop="shopName" align="center" label="购买店铺"></el-table-column>
          <el-table-column prop="address" width="100px" align="center" :show-overflow-tooltip="true" label="收货地"></el-table-column>
          <el-table-column prop="totalPrice" align="center" label="总价"></el-table-column>
          <el-table-column prop="status" align="center" label="订单状态">
      <template v-slot="scope">
        <el-button type="primary" size="small" plain>{{ scope.row.status }}</el-button>
      </template>
          </el-table-column>
          <el-table-column prop="createTime" label="购买时间"></el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
        <el-button type="warning" size="small" :disabled="scope.row.status=='已完成'" @click="evaluate(scope.$index,scope.row.id)" plain>已收到货，评价一下</el-button>
      </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="searchParams.pageNum"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(totalItems)"
          @size-change="orderList"
          @current-change="orderList"
        />
      </el-main>
    </el-container>
    <el-dialog v-model="evaluateVisible" title="给个好评吧~">
      <el-form :model="evaluateData" label-width="100px">
        <el-form-item label="评分">
        <el-rate v-model="evaluateData.star" size="large" />
        </el-form-item>
        <el-form-item label="内容">
      <el-input v-model="evaluateData.evaluate" :rows="2" type="textarea" placeholder="请留下您宝贵的意见"/>
        </el-form-item>
    </el-form>
    <el-form-item>
      <el-button style="margin-top: 10px;" type="primary" @click="evaluateSubmit(evaluateData.id,evaluateData.shopId)">提交</el-button>
    </el-form-item>
  </el-dialog>
    <Footer />
  </template>
  
  <script>
import Header from '@/views/front/Header.vue'
import Footer from '@/views/front/Footer.vue'
import { ElMessage } from 'element-plus'
  import { reactive, toRefs, ref } from 'vue'
  import { orderListApi,evaluateApi } from '@/api/order'
  import { useStore } from 'vuex'
  export default {
    components: {
      Header,
      Footer
    },
    setup() {
      const data = reactive({
        evaluateVisible:false,
        evaluateData:{},
        totalItems: '',
        orders: [],
        searchParams: {
          pageNum: 1,
          pageSize: 5,
          userId: ''
        }
      })
      const activeIndex = ref('3')
  
      const store = useStore()
  
      const uInfo = store.state.uInfo.userInfo
  
      const orderList = () => {
            data.searchParams.userId = uInfo.userId
            orderListApi(data.searchParams).then((res) => {
              if (res) {
                data.orders = res.data.content
                data.totalItems = res.data.totalSize
              }
            })
          }
    const evaluate = (i,id) => {
      data.evaluateVisible = true,
      orderList()
      data.evaluateData = {id:id,shopId:data.orders[i].shopId,star:data.orders[i].star,evaluate:data.orders[i].evaluate}
    }
    const evaluateSubmit =(id,shopId)=>{
      const eData={orderId:id,shopId:shopId,star:data.evaluateData.star,evaluate:data.evaluateData.evaluate}
      evaluateApi(eData).then((res)=>{
        if(res){
          ElMessage({
            message: '评价成功',
            type: 'success',
            duration: 2000
          })
          data.evaluateVisible = false
          data.evaluateData = {}
          orderList()
        }
      })
    }
      orderList()
      return {
        ...toRefs(data),
        activeIndex,
        orderList,
        evaluate,
        evaluateSubmit
      }
    },
    methods: {
    }
  }
  </script>
  
  <style scoped></style>
  